<template>
	<view class="detail-container">
		<view class="cabinet-header">
			<view class="cabinet-title">
				<text class="cabinet-name">{{currentCabinet.cabinetName || '未知电柜'}}</text>
			</view>
			<view class="cabinet-codes">
				<text class="code-item">二维码编号 {{currentCabinet.cabinetSn}}</text>
				<text class="code-item">地址 {{currentCabinet.address}}</text>
			</view>
		</view>

		<view class="tab-bar">
			<view class="tab-item" :class="{active: activeTab === 'doors'}" @click="activeTab = 'doors'">
				仓门管理
			</view>
			<view class="tab-item" :class="{active: activeTab === 'meter'}" @click="activeTab = 'meter'">
				电表信息
			</view>
			<view class="tab-item" :class="{active: activeTab === 'logs'}" @click="activeTab = 'logs'">
				操作日志
			</view>
			<view class="tab-item" :class="{active: activeTab === 'info'}" @click="activeTab = 'info'">
				基本信息
			</view>
		</view>

		<view class="content-area">
			<!-- 批量操作栏 -->
			<!-- <view class="batch-operations" v-if="selectedDoors.length > 0">
				<view class="batch-info">
					<text class="batch-text">已选择 {{selectedDoors.length}} 个仓门</text>
				</view>
				<view class="batch-actions">
					<button class="batch-btn" @click="batchOpenDoors">批量开仓</button>
					<button class="batch-btn" @click="clearSelection">取消选择</button>
				</view>
			</view> -->

			

			<scroll-view class="door-list" scroll-y v-if="activeTab === 'doors'">
				<view class="door-item" v-for="door in cabinetDetail.doors" :key="door.doorSn"
					@click="toggleDoorSelection(door.doorSn)">
					<view class="door-selector">
						<view class="checkbox" :class="{'checked': selectedDoors.includes(door.doorSn)}">
							<text class="checkmark" v-if="selectedDoors.includes(door.doorSn)">✓</text>
						</view>
					</view>

					<view class="door-content">
						<view class="door-header">
							<text class="door-code">{{door.batterySn || '未知编号'}}</text>
							<text class="door-status" :class="{
								  'status-available': door.boxStatus === 2,
								  'status-charging': door.boxStatus === 1,
								  'status-empty': door.boxStatus === 0
								}">
								{{boxStatusList[door.boxStatus || 0]}}
							</text>
						</view>

						<view class="door-details" v-if="door.boxStatus !== 0">
							<view class="battery-info" @click.stop="toBattery(door)">
								<view class="battery-door-sn">
									<text class="sn">{{door.doorSn}}</text>
								</view>
								<view class="battery-icon">
									<image src="/static/b0.png" mode="widthFix" style="width: 40px;" v-if="door.batteryLevel<30"></image>
									<image src="/static/b1.png" mode="widthFix" style="width: 40px;" v-if="door.batteryLevel<70 && door.batteryLevel>29"></image>
									<image src="/static/b2.png" mode="widthFix" style="width: 40px;" v-if="door.batteryLevel<101 && door.batteryLevel>69"></image>
								</view>
								<view class="battery-details">
									<text class="battery-spec">{{door.batteryTypeName || '未知电池'}}</text>
									<text class="battery-percent">{{door.batteryLevel ? door.batteryLevel+'%电量' : '未知电量'}}</text>
									<text class="charge-time">
										{{boxStatusList[door.boxStatus || 0]}}
									</text>
								</view>
							</view>

							<view class="battery-params">
								<view class="param-item">
									<text class="param-label">温度</text>
									<text class="param-value">{{door.boxTemperature || '未知'}}</text>
								</view>
								<view class="param-item">
									<text class="param-label">电流</text>
									<text class="param-value">{{door.batteryCurrent || '未知'}}</text>
								</view>
								<view class="param-item">
									<text class="param-label">电压</text>
									<text class="param-value">{{door.batteryVoltage || '未知'}}</text>
								</view>
								<view class="param-item">
									<text class="param-label">柜门</text>
									<text class="param-value">{{door.doorStatus ? '开启' : '关闭'}}</text>
								</view>
							</view>
						</view>

						<view class="empty-content" v-else>
							<text class="empty-text">无电池</text>
							<view class="empty-params">
								<text class="param-label">温度</text>
								<text class="param-value">{{door.boxTemperature || '未知'}}</text>
								<text class="param-label">柜门</text>
								<text class="param-value">{{door.doorStatus ? '开启' : '关闭'}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 其他标签页内容 -->
			<view class="tab-content" v-if="activeTab !== 'doors'">
				<text class="tab-placeholder">{{tabNames[activeTab]}}页面内容</text>
			</view>
		</view>

		<!-- 更多菜单弹窗 -->
		<view class="more-menu-mask" v-if="showMoreMenu" @click="showMoreMenu = false"></view>
		<view class="more-menu" v-if="showMoreMenu">
			<view class="menu-item" @click="disableCabinet">
				<text class="menu-text">禁用</text>
			</view>
			<view class="menu-item" @click="enableCabinet">
				<text class="menu-text">启用</text>
			</view>
			<view class="menu-item" @click="editCabinet">
				<text class="menu-text">编辑电柜</text>
			</view>
			<view class="menu-item" @click="openMaintenance">
				<text class="menu-text">开维护门</text>
			</view>
		</view>

		<view class="action-bar" v-if="activeTab === 'doors'">
				<view class="select-all" @click="toggleSelectAll">
					<view class="checkbox" :class="{'checked': isAllSelected}">
						<text class="checkmark" v-if="isAllSelected">✓</text>
					</view>
					<text class="select-all-text">全选</text>
				</view>
				<!-- <view class="refresh-info" @click="refreshData">
					<text class="refresh-text">刷新信息</text>
					<text class="refresh-icon">🔄</text>
				</view> -->
			<button class="action-btn door-action-btn" @click="openAllDoors">开仓门</button>
			<button class="action-btn more-action-btn" @click="toggleMoreMenu">更多</button>
		</view>
	</view>
</template>

<script>
	import api from '@/config/api.js'
	export default {
		data() {
			return {
				activeTab: 'doors',
				cabinetSn:'',
				cabinetName:'',
				selectedDoors: [], // 选中的仓门ID数组
				showMoreMenu: false, // 控制更多菜单显示
				currentCabinet:null,
				cabinetDetail: {
					id: 1,
					doors: []
				},
				tabNames: {
					doors: '仓门管理',
					meter: '电表信息',
					logs: '操作日志',
					info: '基本信息'
				},
				boxStatusList:['无电池','电池正在充电','电池充满','未知','未知','异常','有电池未识别编号','待充电','电池消失' ,'电池通信故障']
			}
		},
		computed: {
			// 计算是否全选
			isAllSelected() {
				return this.selectedDoors.length === this.cabinetDetail.doors.length &&
					this.cabinetDetail.doors.length > 0;
			}
		},
		onLoad(options) {
			this.cabinetSn = options.cabinetSn
			this.cabinetName = options.cabinetName
			this.currentCabinet=uni.getStorageSync('currentCabinet')
			if(this.currentCabinet){
				this.loadCabinetDetail(this.cabinetSn)
			}else{
				uni.showToast({
					title: '未找到电柜信息',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.navigateBack()
				},1500)
			}
		},
		methods: {
			async loadCabinetDetail(cabinetSn) {
				try {
					const result = await api.cabinet.getCabinetDetail({cabinetSn})
					this.cabinetDetail.doors = result.filter((item)=>item.batterySn)
				} catch (error) {
					console.error('获取电柜详情失败:', error)
				}
			},
			// 上传文件示例
			async uploadImage(filePath) {
				try {
					const result = await api.system.uploadFile({
						type: 'image'
					}, filePath)
					return result.data.fileUrl
				} catch (error) {
					console.error('文件上传失败:', error)
					throw error
				}
			},
			// 切换单个仓门的选择状态
			toggleDoorSelection(doorId) {
				const index = this.selectedDoors.indexOf(doorId);
				if (index > -1) {
					// 如果已选中，则取消选择
					this.selectedDoors.splice(index, 1);
				} else {
					// 如果未选中，则添加选择
					this.selectedDoors.push(doorId);
				}
			},

			// 切换全选状态
			toggleSelectAll() {
				if (this.isAllSelected) {
					// 如果已全选，则取消全选
					this.selectedDoors = [];
				} else {
					// 如果未全选，则全选
					this.selectedDoors = this.cabinetDetail.doors.map(door => door.doorSn);
				}
			},

			// 清除所有选择
			clearSelection() {
				this.selectedDoors = [];
			},

			// 批量开仓门
			batchOpenDoors() {
				if (this.selectedDoors.length === 0) {
					uni.showToast({
						title: '请先选择仓门',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '批量开仓门',
					content: `确定要打开选中的 ${this.selectedDoors.length} 个仓门吗？`,
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '操作中...'
							})
							const params={
								doorIds:this.selectedDoors.join(","),
								cabinetSn:this.cabinetSn
							}
							console.log('params',params)
							const result = await api.door.batchOpenDoors({...params})
							
							uni.hideLoading()
							uni.showToast({
								title: '开仓成功',
								icon: 'success'
							})

							// 操作完成后清空选择
							this.clearSelection();
						}
					}
				});
			},

			// 打开所有仓门
			openAllDoors() {
				if(this.selectedDoors.length){
					uni.showToast({
						title: '请选择需要操作的仓门',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '开仓门',
					content: '确定要打开所有仓门吗？',
					success: (res) => {
						if (res.confirm) {
							this.batchOpenDoors()
						}
					}
				});
			},

			// 刷新数据
			refreshData() {
				uni.showLoading({
					title: '刷新中...'
				});

				// 模拟刷新数据
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					});

					// 实际开发中这里应该重新请求数据
				}, 1000);
			},

			// 切换更多菜单显示
			toggleMoreMenu() {
				this.showMoreMenu = !this.showMoreMenu;
			},

			// 以下为原有方法
			disableCabinet() {
				this.showMoreMenu = false;
				uni.showModal({
					title: '确认禁用',
					content: '确定要禁用这个电柜吗？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '操作中...'
							})
							const params={
								doorIds:this.selectedDoors.join(","),
								cabinetSn:this.cabinetSn
							}
							console.log('params',params)
							const result = await api.door.disableDoor({...params})
							
							uni.hideLoading()
							uni.showToast({
								title: '电柜已禁用',
								icon: 'success'
							});
						}
					}
				});
			},

			async enableCabinet() {
				this.showMoreMenu = false;
				uni.showLoading({
					title: '操作中...'
				})
				const params={
					doorIds:this.selectedDoors.join(","),
					cabinetSn:this.cabinetSn
				}
				console.log('params',params)
				const result = await api.door.enableDoor({...params})
				
				uni.hideLoading()
				uni.showToast({
					title: '电柜已启用',
					icon: 'success'
				});
			},

			renewCabinet() {
				this.showMoreMenu = false;
				uni.showToast({
					title: '续费功能',
					icon: 'none'
				});
			},
			toBattery(door){
				uni.navigateTo({
					url:'/pages/battery/battery?batterySn='+door.batterySn
				})
			},
			editCabinet() {
				this.showMoreMenu = false;
				uni.showToast({
					title: '编辑电柜功能',
					icon: 'none'
				});
			},

			openMaintenance() {
				this.showMoreMenu = false;
				uni.showModal({
					title: '开维护门',
					content: '确定要打开维护门吗？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '操作中...'
							})
							const params={
								cabinetSn:this.cabinetSn
							}
							console.log('openMaintenance',params)
							const result = await api.door.openMaintenanceDoor({...params})
							
							uni.hideLoading()
							uni.showToast({
								title: '维护门已打开',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.detail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		/* padding-bottom: 120rpx; */
	}

	.cabinet-header {
		background-color: #fff;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.cabinet-title {
		margin-bottom: 20rpx;
	}

	.cabinet-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.cabinet-codes {
		display: flex;
		flex-direction: column;
	}

	.code-item {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.tab-bar {
		display: flex;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
	}

	.tab-item.active {
		color: #007AFF;
		font-weight: bold;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #007AFF;
		border-radius: 2rpx;
	}

	.content-area {
		padding: 0;
	}

	/* 批量操作栏样式 */
	.batch-operations {
		background-color: #e6f7ff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #bae7ff;
	}

	.batch-text {
		font-size: 28rpx;
		color: #1890ff;
		font-weight: bold;
	}

	.batch-actions {
		display: flex;
	}

	.batch-btn {
		background-color: #1890ff;
		color: #fff;
		padding: 12rpx 24rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
	}



	.select-all {
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.checkbox {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #ddd;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
	}

	.checkbox.checked {
		background-color: #007AFF;
		border-color: #007AFF;
	}

	.checkmark {
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}

	.select-all-text {
		font-size: 28rpx;
		color: #333;
	}

	.refresh-info {
		display: flex;
		align-items: center;
	}

	.refresh-text {
		font-size: 26rpx;
		color: #007AFF;
		margin-right: 10rpx;
	}

	.refresh-icon {
		font-size: 28rpx;
	}

	.door-list {
		height: calc(100vh - 500rpx);
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.door-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: flex-start;
	}

	.door-selector {
		margin-right: 20rpx;
		margin-top: 5rpx;
	}

	.door-content {
		flex: 1;
	}

	.door-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.door-code {
		font-size: 26rpx;
		color: #333;
		font-weight: bold;
	}

	.door-status {
		font-size: 24rpx;
		padding: 6rpx 12rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
		color: #999;
	}

	.status-available {
		background-color: #f6ffed;
		color: #52c41a;
	}

	.status-charging {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.status-empty {
		background-color: #f5f5f5;
		color: #ff5500;
	}

	.battery-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.battery-door-sn{
		border-radius: 4px;
		padding: 5px;
		text-align: center;
		background-color: #bec1cc;
		color: #fff;
		margin-right: 15px;
	}
	.battery-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #f0f0f0;
		border-radius: 16rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.battery-symbol {
		font-size: 40rpx;
	}

	.battery-details {
		flex: 1;
	}

	.battery-spec {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.battery-percent {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.charge-time {
		display: block;
		font-size: 24rpx;
		color: #1890ff;
	}

	.battery-params {
		display: flex;
		justify-content: space-between;
	}

	.param-item {
		text-align: center;
	}

	.param-label {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.param-value {
		display: block;
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}

	.empty-content {
		text-align: center;
		padding: 40rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.empty-params {
		display: flex;
		justify-content: center;
	}

	.empty-params .param-label {
		margin-right: 10rpx;
	}

	.empty-params .param-value {
		margin-right: 30rpx;
	}

	.tab-content {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 60rpx 30rpx;
		text-align: center;
		margin: 20rpx 30rpx;
	}

	.tab-placeholder {
		font-size: 28rpx;
		color: #999;
	}

	/* 更多菜单样式 */
	.more-menu-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}

	.more-menu {
		position: fixed;
		bottom: 120rpx;
		right: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
		z-index: 999;
		overflow: hidden;
		min-width: 200rpx;
	}

	.menu-item {
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-text {
		font-size: 28rpx;
		color: #333;
	}

	.menu-item:active {
		background-color: #f5f5f5;
	}

	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #eee;
	}

	.action-btn {
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		line-height: 80rpx;
	}

	.door-action-btn {
		flex: 2;
		background-color: #007AFF;
		color: #fff;
		margin-right: 20rpx;
	}

	.more-action-btn {
		flex: 1;
		color: #333;
		
	}
</style>